---
title: Next.js
description: Aturan linting khusus Next.js untuk Ultracite.
---

Konfigurasi Next.js ini berisi aturan linting khusus Next.js untuk optimisasi gambar, struktur dokumen, dan pola App Router.

## Instalasi

Tambahkan konfigurasi Next.js ke `biome.jsonc` Anda:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Ikhtisar

Konfigurasi ini menambahkan aturan yang spesifik untuk pengembangan Next.js:

- **Optimisasi Gambar**: Menegakkan penggunaan komponen Image dari Next.js
- **Struktur Dokumen**: Mencegah penggunaan yang tidak semestinya dari komponen khusus Next.js
- **Komponen Klien**: Pastikan komponen klien yang asinkron ditangani dengan benar
- **File Konfigurasi**: Penanganan khusus untuk file `next.config.*`

## Aturan Khusus Next.js

### Eksperimental

| Aturan | Pengaturan | Deskripsi |
|--------|-----------|-----------|
| `noNextAsyncClientComponent` | `error` | Mencegah komponen klien yang asinkron di Next.js. Komponen klien harus bersifat sinkron; gunakan komponen server untuk operasi asinkron. |

### Kinerja

| Aturan | Pengaturan | Deskripsi |
|--------|-----------|-----------|
| `noImgElement` | `error` | Melarang penggunaan elemen HTML `<img>`. Gunakan komponen `<Image>` dari Next.js sebagai gantinya untuk optimisasi gambar otomatis. |

### Gaya

| Aturan | Pengaturan | Deskripsi |
|--------|-----------|-----------|
| `noHeadElement` | `error` | Melarang penggunaan elemen HTML `<head>`. Gunakan `next/head` dari Next.js atau API metadata App Router sebagai gantinya. |

### Mencurigakan

| Aturan | Pengaturan | Deskripsi |
|--------|-----------|-----------|
| `noDocumentImportInPage` | `error` | Mencegah impor `next/document` dalam file halaman. `_document.tsx` hanya boleh ada di `pages/_document.tsx`. |
| `noHeadImportInDocument` | `error` | Mencegah impor `next/head` di `_document.tsx`. Gunakan `<Head>` dari `next/document` sebagai gantinya. |

## Penggantian File Konfigurasi

Preset Next.js menyertakan penanganan khusus untuk file konfigurasi dan komponen App Router:

### File Konfigurasi Next.js

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Ini memungkinkan pola konfigurasi Next.js yang mungkin biasanya tidak lolos aturan linting.

### Halaman dan Layout App Router

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Komponen halaman dan layout App Router diperbolehkan bersifat asinkron tanpa mewajibkan penggunaan `await`, karena Next.js menangani ini secara khusus untuk rendering sisi-server dan pengambilan data.